<template>
<view class="open" v-show='isshow'>
	<view class="all"  @click='close'></view>
	<view class="bot" :class="isshow1?'top':'bottom'" :style="{'padding-bottom': (bottom+10) + 'rpx'}">
		<view class="btn_flex">
			<view class="qx" @click="cancel">
				取消
			</view>
			<view class="qd" @click="sure">
				确定
			</view>
		</view>
		<view class="chain_list">
			<view class="chain_img" :class="{choose:(indexList.findIndex(item=>item==index)>-1)}" v-for="(item,index) in chainList" :key='index' @click="toDetail(item,index)">
				<image  class="" :src="item.chain_img||item.img" mode=""></image>
				<view class="name">
					{{item.chain_name}}
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
	export default {
		props:['chainList'],
		name:"open",
		data() {
			return {
				isshow:false,
				isshow1:false,
				bottom:0,
				list:[],
				indexList:[]
			};
		},
		created() {
			let that = this
			uni.getSystemInfo({
			    success: function (res) {
			        let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
			        model.forEach(item => {
			            //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
			            if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
			                that.bottom = 40;
			            }
			        })
			    }
			});
		},
		methods:{
			show(list){
				this.list=list||[]
				this.indexList=[]
				if(list&&list.length>0){
					this.list.forEach(item=>{
						let index = this.chainList.findIndex(item1=>item1.id==item.id)
						if(index>-1){
							this.indexList.push(index)
						}
					})
				}
				this.isshow=true
				this.$nextTick(()=>{
					this.isshow1=true
				})
			},
			close(){
				this.isshow1=false
				setTimeout(()=>{
					this.isshow=false
				},300)
			},
			toDetail(item,index){
				let thisIndex = this.indexList.findIndex(item1=>item1==index)
				if(thisIndex==-1 && this.indexList.length==3){
					uni.showToast({
						title:'最多选择三条产业链',
						icon:'none'
					})
					return
				}
				if(thisIndex==-1){
					this.list.push(item)
					this.indexList.push(index)
				}else{
					this.indexList.splice(thisIndex,1)
					this.list.splice(thisIndex,1)
				}
			},
			sure(){
				this.$emit('getChain',this.list)
				this.close()
			},
			cancel(){
				this.close()
			},
		}
	}
</script>

<style scoped lang="scss">
	.choose::after{
		position: absolute;
		content: '已选择';
		color: #ff9933;
		font-weight: 800;
		font-size: 16px;
		text-align: center;
		line-height: 80px;
		border:1px solid #ff9933;
		width: 100%;
		height: 100%;
		background-color: rgba($color: #000000, $alpha: .5);
		z-index: 10;
		left: 0;
		top: 0;
		border-radius: 8px;
		// width: calc(50% - 20px) !important;
		// height: 70px !important;
	}
	.btn_flex{
		width: calc(100% - 24px);
		padding: 0 12px;
		height: 36px;
		line-height: 36px;
		border-bottom: 1px solid #d4d4d4;
		display: flex;
		justify-content: space-between;
		.qx{
			font-size: 18px;
			color: #666;
		}
		.qd{
			font-size: 18px;
			color: #3eb352;
		}
	}
.open{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 101;
	background-color: rgba($color: #000000, $alpha: .5);
	.all{
		width: 100%;
		height: 100%;
	}
	.bot{
		position: absolute;
		z-index: 1001;
		bottom: 0;
		width: calc(100% - 24px);
		background-color: #fff;
		// display: flex;
		// text-align: center;
		transition: all 0.3s;
		height: 60%;
		padding: 10px 12px;
		.botL{
			height: calc(100% - 20px);
			width: 100%;
			overflow: auto;
		}
		.title_l{
			height: 36px;
			line-height: 26px;
			border-bottom: 2px solid #e5e5e5;
			color:#ff9933
		}
		.chain_list{
			width: calc(100% - 10px);
			height: calc(100% - 36px);
			overflow: auto;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin: 5px;
		}
		.chain_img{
			width: calc(50% - 10px);
			height: 80px;
			margin: 5px 0;
			position: relative;
			border-radius: 8px;
			image{
				height: 100%;
				width: 100%;
				border-radius: 8px;
			}
			.name{
				position: absolute;
				bottom: 0px;
				left: 0px;
				width: calc(100% - 20px);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				background-color: rgba($color: #000000, $alpha: 0.5);
				// font-weight: 800;
				color: #fff;
				border-radius: 0 0 8px 8px;
				padding: 2px 10px;
			}
		}
	}
	.bottom{
		transform: translateY(100%);
	}
}
</style>
